<template>
  <div class="content-body">
    <el-scrollbar style="height: 100%;overflow-x: hidden;overflow-y: auto">
      <div v-if="undefined !== menu && null !== menu">
        <div v-for="item in columns" :key="item.id" class="column-li">
          <component-mobile-template
            :temp="item"
            @fetch-data="callBack"
            @fetch-entity="callBackEntity"
          />
        </div>
      </div>
      <div v-else>Loading...</div>
    </el-scrollbar>
  </div>
</template>
<script>
import ComponentMobileTemplate from '@/template';
import { queryALlColumnByMenuId } from '@/api/tp/column';
export default {
  name: 'MobileContent',
  components: { ComponentMobileTemplate },
  data() {
    return {
      columns: null,
      layout: null,
      menu: null,
      moreColumn: null
    };
  },
  methods: {
    openMenu(menu) {
      this.moreColumn = null;
      this.menu = menu;
      this.initColumn();
    },
    callBack(data) {
      this.$emit('parent-more', data);
    },
    callBackEntity(data) {
      this.$emit('parent-entity', data);
    },
    initColumn() {
      if (this.menu !== undefined && this.menu !== null) {
        queryALlColumnByMenuId({ mid: this.menu })
          .then(res => {
            const { data } = res;
            if (data !== null) {
              this.columns = data.data;
            }
            this.$emit('fact-closeLoading');
          })
          .catch(() => {
            this.columns = [];
            this.$emit('fact-closeLoading');
          });
      }
    },
    callMoreBack() {}
  }
};
</script>

<style scoped>
.content-body {
  position: relative;
  height: 100%;
  width: 100%;
}
.el-scrollbar >>> .el-scrollbar__wrap {
  overflow-y: scroll;
  overflow-x: hidden;
}
.column-li:not(:first-child) {
  margin: 10px 10px 0 10px;
}
</style>
